<template>
  <div>
    <div class="draw-list">
      <p class="draw-title">选择校区：</p>
      <div class="tab">
        <div class="tab-item" :class="{ 'active': item.active }" v-for="item in classObj.area" :key="item.code"
          @click="choose(item, 1)">
          <p class="tab-item__title">{{ item.name }}</p>
          <p class="tab-item__text">{{ 40 }}</p>
        </div>
      </div>
    </div>
    <div class="draw-list">
      <p class="draw-title">选择学院：</p>
      <div class="draw-list__outer" :class="[collegeArrow ? 'draw-list__outer--ellpsis' : '']">
        <p class="draw-list__item" :class="{ 'draw-list__item--active': item.active }" v-for="item in classObj.choose"
          :key="item.id" @click="choose(item, 2)">{{ item.name }}</p>
        <p class="draw-arrow" @click="collegeArrow = !collegeArrow">
          <span style="marginRight:10px">{{ collegeArrow ? '展开' : '收起' }}</span>
          <icon-font :type="collegeArrow ? 'icon-down' : 'icon-up'"></icon-font>
        </p>
      </div>
    </div>
    <div class="draw-list">
      <p class="draw-title">选择学科：</p>
      <div class="draw-list__outer" :class="[subjectArrow ? 'draw-list__outer--ellpsis' : '']">
        <p class="draw-list__item" :class="{ 'draw-list__item--active': item.active }" v-for="item in classObj.school"
          :key="item.id" @click="choose(item, 3)">{{ item.name }}</p>
        <p class="draw-arrow" @click="subjectArrow = !subjectArrow">
          <span style="marginRight:10px">{{ subjectArrow ? '展开' : '收起' }}</span>
          <icon-font :type="subjectArrow ? 'icon-down' : 'icon-up'"></icon-font>
        </p>
      </div>
    </div>
    <div class="draw-select">
      <p>教学楼：</p>
      <a-select v-model:value="queryParams.build" placeholder="不限" style="width:224px;marginRight:104px">
        <a-select-option :value="1">1</a-select-option>
        <a-select-option :value="2">2</a-select-option>
      </a-select>
      <p>教室：</p>
      <a-select v-model:value="queryParams.classroom" placeholder="不限" style="width:224px">
        <a-select-option :value="1">1</a-select-option>
        <a-select-option :value="2">2</a-select-option>
      </a-select>
    </div>
    <div class="draw-list none-border">
      <p class="draw-title">课程状态：</p>
      <div class="draw-list__outer">
        <p class="draw-list__item" :class="{ 'draw-list__item--active': item.active }" v-for="item in classObj.status"
          :key="item.id" @click="choose(item, 4)">{{
              item.name
          }}</p>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from 'vue'
import { DynamicTable, TableQueryHeader } from '@/components/dynamic-table'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from '@/store'
import { getChooseType } from '@/api/homepage'
import { IconFont } from '@/components/iconfont'


export default defineComponent({
  name: 'DrawerSchool',
  components: {
    IconFont
  },
  emis: ['callCancel', 'callSubmit'],
  setup(props, { emit }) {
    const tableRef = ref<InstanceType<typeof DynamicTable>>()

    const valueDate = ref<moment.Moment[]>([]);

    const route = useRoute()

    const router = useRouter()

    const store = useStore()

    const state = reactive({
      classObj: {} as any,
      collegeArrow: false,
      subjectArrow: false,
      queryParams: {
        build: null,
        classroom: null,
        areaId: null,
        chooseId: null,
        schoolId: null,
        statusId: null
      }
    })


    /**
     * @description 加载表格数据
     */


    onMounted(async () => {
      const res = await getChooseType({})
      state.classObj = res
    })

    // 选择各种选项
    const choose = (item, type) => {
      // item.active = true;
      if (type === 1) {
        state.queryParams.areaId = item.id;
        state.classObj.area.map(v => {
          v.id === item.id ? v.active = true : v.active = false;
        })
      } else if (type === 2) {
        state.queryParams.chooseId = item.id;
        state.classObj.choose.map(v => {
          v.id === item.id ? v.active = true : v.active = false;
        })
      } else if (type === 3) {
        state.queryParams.schoolId = item.id;
        state.classObj.school.map(v => {
          v.id === item.id ? v.active = true : v.active = false;
        })
      } else if (type === 4) {
        state.queryParams.statusId = item.id;
        state.classObj.status.map(v => {
          v.id === item.id ? v.active = true : v.active = false;
        })
      }
    }
    // 重置
    const reset = () => {
      state.queryParams = {
        build: null,
        classroom: null,
        areaId: null,
        chooseId: null,
        schoolId: null,
        statusId: null
      }
      state.classObj.status.map(v => {
        v.active = false;
      })
      state.classObj.area.map(v => {
        v.active = false;
      })
      state.classObj.school.map(v => {
        v.active = false;
      })
      state.classObj.choose.map(v => {
        v.active = false;
      })
    }
    // 取消
    const cancel = () => {
      emit('callCancel', false)
    }
    // 提交
    const submit = () => {
      router.push({
        path: '/list',
        query: state.queryParams
      })
      emit('callCancel', false)
    }


    return {
      ...toRefs(state),
      tableRef,
      choose,
      reset,
      cancel,
      submit
    }
  }
})
</script>
<style lang="scss" scoped>
</style>
